<!--
 * @Descripttion: none
 * @version: 0.1.0
 * @Author: ...
 * @Date: 2020-08-11 16:56:18
 * @LastEditors: zgw
 * @LastEditTime: 2020-08-13 15:28:47
-->

<!-- 引入头部文件 -->
<%- include("./header.ejs") %>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-12 m-auto">
            <div class="card">
                <div class="card-header">
                    <h2><%= title %></h2>
                </div>
                <div class="card-body w-100" style="overflow-x: auto;">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">id</th>
                                <th scope="col">name</th>
                                <th scope="col">user</th>
                                <th scope="col">password</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody>

                            <%  for(var i=0 ; i < data.length ; i++){ %>
                            <tr>
                                <th scope="row"> <%= data[i].id %></th>
                                <td> <%= data[i].name %> </td>
                                <td> <%= data[i].user %></td>
                                <td> <%= data[i].password %></td>
                                <td> <button class="btn btn-danger Del" data-value="<%= data[i].id %>">删除</button></td>
                            </tr>
                            <% } %>

                        </tbody>
                    </table>
                </div>
                <div class="card-footer">
                    <button class="btn btn-primary btn-lg btn-block" data-toggle="modal"
                        data-target="#exampleModal">增加</button>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">增加一条数据</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="/search/add" method="GET">
                    <div class="form-group">
                        <label for="exampleInputEmail1">姓名</label>
                        <input class="form-control" id="exampleInputEmail1" name="name" aria-describedby="emailHelp"
                            required>
                        <small id="emailHelp" class="form-text text-muted">全部必填</small>
                    </div>
                    <div class="form-group">
                        <label for="input2">用户</label>
                        <input class="form-control" id="input2" name="user" required>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" name="password" id="exampleInputPassword1" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block btn-lg">Submit</button>
                </form>
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="checkModalLabel" tabindex="-1" role="dialog" aria-labelledby="checkModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="isDel">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- //引入js文件 -->
<%- include("./javascript.ejs") %>

<script>
    $(document).ready(function () {

        $('form').submit(function () {
            event.preventDefault();

            var d = {};
            var t = $('form').serializeArray();
            $.each(t, function () {
                d[this.name] = this.value;
            });
            console.log(d);

            $.ajax({
                url: "/search/add?name=" + d.name + "&user=" + d.user + "&password=" + d
                    .password,
                method: "POST",
                success: function (result) {
                    // $("#div1").html(result);
                    console.log(result);
                    $('#exampleModal').modal('toggle');
                }
            });
        })

        $('.Del').click(function () {
            console.log(
                $(this).attr('data-value')
            );
            let id = parseInt($(this).attr('data-value'));

            $.ajax({
                url: "/search/del?id=" + id,
                method: "POST",
                success: function (result) {
                    // $("#div1").html(result);
                    console.log(result);
                    // $('#checkModalLabel').modal('toggle');

                    $('.card-body').prepend(`
                        <div class="alert alert-info alert-dismissible fade show" role="alert">
                        删除成功
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                    `)

                }
            });
        })

    });
</script>

<!-- 引入foter -->
<%- include("./footer.ejs") %>